<!-- Dom模板 -->
<template>
  <div class="all">
    <!-- Dom内容 -->
    <div class="left">
      <div class="title">点餐系统</div>
      <div class="bottom">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item-group v-for="(item, index) in data" :key="index">
                <el-menu-item
                  :class="item.meta.icon"
                  @click="liClick(index)"
                  :id="$route.meta.nowIndex === index ? 'active' : ''"
                  >{{ item.name }}</el-menu-item
                >
                <el-menu-item v-if="item.meta.isChild">
                  <el-menu-item
                    v-for="(items, indexs) in item.children"
                    :key="indexs"
                    :id="$route.meta.index === indexs ? 'active1' : ''"
                    class="juice"
                    @click="liClickone(indexs)"
                    >{{ items.name }}</el-menu-item
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="right">
      <!-- <router-view></router-view> -->
      <div class="top">
        <div class="title_right">
          <div class="name">
            饮品管理有限公司xx分店
            <span class="iconfont icon-xiala"></span>
          </div>
          <!-- 郭晓晓 start -->
          <div class="cont">
            <span>{{ user }}</span>
            <img :src="imgs" alt="" class="img" />
            <span class="iconfont icon-xiaoxi"></span>
            <span class="iconfont icon-dianyuan" @click="logout"></span>
          </div>
          <!-- 郭晓晓 end -->
        </div>
      </div>
      <!-- 杨紫爻 start -->
      <div class="routerTab">
        <h3>
          <span>主页</span>
          <span v-if="index">/{{ data[index].name }}</span>
          <span v-if="nowIndex !== ''"
            >/{{ data[2].children[nowIndex].name }}</span
          >
        </h3>
      </div>
      <router-view></router-view>
      <!-- 杨紫爻 end -->
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      data: "",
      index: "",
      nowIndex: "",
      user: "",
      imgs: "",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  // 郭晓晓 start
  created() {
    let n = JSON.parse(localStorage.getItem("user"));
    this.user = n.username;
    this.imgs = n.img;
    console.log(this.imgs);
  },
  // 郭晓晓 end
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.$route);
    console.log(this.$router.options.routes);
    this.data = this.$router.options.routes.filter((item) => {
      return item.meta.titleNav;
    })[0].children;
    // 杨紫爻 start
    if (this.$route.path === "/home") {
      this.index = 0;
      this.nowIndex = "";
    } else {
      console.log(this.data);
      let tab = JSON.parse(localStorage.getItem("tab"));
      this.index = tab.index;
      this.nowIndex = tab.nowIndex;
    }
    // 杨紫爻 end
  },
  // Vue方法定义
  methods: {
    // 郭晓晓 start
    logout() {
      localStorage.removeItem("user");
      this.user = "";
      this.imgs = "";
      this.$router.replace({ path: "/login" });
      this.$message({
        message: "退出登录成功",
        type: "sucess",
      });
    },
    // 郭晓晓 end
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    liClick(index) {
      this.data.forEach((items, indexs) => {
        if (index === indexs) {
          this.$router.push(items.path);
          this.index = index;
          console.log(this.data[this.index].name);
          // 杨紫爻 start
          if (index !== 2) {
            this.nowIndex = "";
          }
        }
      });
      localStorage.setItem(
        "tab",
        JSON.stringify({ index: this.index, nowIndex: this.nowIndex })
      );
      // 杨紫爻 end
    },
    liClickone(index) {
      let data = this.data.filter((itemss) => {
        return itemss.meta.isChild;
      })[0].children;
      console.log(data);
      data.forEach((items, indexs) => {
        if (index === indexs) {
          this.$router.push(items.path);
          this.nowIndex = index;
          console.log(this.data[2].children[this.nowIndex].name);
          // 杨紫爻 start
          if (this.nowIndex !== "") {
            this.index = 2;
          }
        }
      });
      localStorage.setItem(
        "tab",
        JSON.stringify({ index: this.index, nowIndex: this.nowIndex })
      );
      // 杨紫爻 end
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  padding: 0;
  margin: 0;
}
.all {
  width: 100%;
  height: 100vh;
  display: flex;
  margin: 0 auto;
}
.left {
  width: 150px;
  height: 100vh;
}
.el-col-12 {
  width: 100%;
  height: 100%;
}
.right {
  width: calc(100vw - 150px);
  height: 100%;
}
.title {
  width: 100%;
  height: 60px;
  background: blue;
  color: #fff;
  line-height: 60px;
  text-align: center;
}

#active {
  color: blue;
  box-shadow: -3px 0px 0px blue;
}
#active1 {
  color: blue;
}
.juice {
  width: 100%;
  color: black;
  font-size: 12px;
  height: 30px;
  line-height: 30px !important;
}
.el-menu-item.is-active {
  color: black;
}
.right {
  background: #ddd;
}
.title_right {
  /* line-height: 60px; */
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.name {
  font-size: 12px;
  color: #ccc;
  height: 60px;
  line-height: 60px;
}
.img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
}
.top {
  width: 100%;
  height: 60px;
  background: #fff;
  /* padding: 0 30px; */
  border-bottom: 1px solid #ccc;
}
.routerTab {
  width: 100%;
  height: 70px;
  background: #fff;
  border-bottom: 1px solid #ccc;
}
.routerTab h3 {
  line-height: 70px;
  margin-left: 20px;
}
.cont {
  line-height: 60px;
}
.cont span {
  margin: 0 10px 0 10px;
  font-size: 16px;
}
</style>
